<template>
  <div class="supplyDemand">
    <div class="pl">
      <div class="type_tabs">
        <div class="type_tab" @click="showCheck1 = !showCheck1">
          <span>{{varietiesName? varietiesName:'全部品种'}}</span>
          <img v-if="!showCheck1" src="@/assets/img/xia_w.png" alt="" />
          <img v-else src="@/assets/img/shang.png" alt="" />
        </div>
        <div class="type_tab" @click="handleTab('newPrice')">
          <span>最新均价</span>

        </div>
        <div class="type_tab pri" @click="handleTab('fluctuationRange')">
          <span>涨跌（比昨日）</span>
        </div>
      </div>
      <div class="pa">
        <div class="plist" v-if="showCheck1">
          <div
            class="p_item"
            :class="{ on: params.varietiesType === item.value }"
            v-for="(item, index) in varietiesList"
            @click="handleVarieties(item)"
            :key="index"
          >
            {{ item.label }}
            <img v-if="params.varietiesType === item.value" src="@/assets/img/dui.png" alt="" />
          </div>
        </div>
        <div class="pbtns" v-if="showCheck1">
          <div @click="handleReset">重置</div>
          <div @click="handleSave">确定</div>
        </div>
      </div>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading"  :finished="finished" finished-text="没有更多了" @load="loadList">
          <template v-if="list.length > 0">
            <div class="items">
              <div class="item" v-for="(item,index) in list" :key="index">
                <div class="i1">
                  {{item.name}}
                </div>
                 <div class="i2">
                  {{item.newPrice}} <span :class="item.difference >0? '':'active'">{{item.difference >0? '+'+item.difference:item.difference}}
                    <img v-if="item.difference >0" src="@/assets/img/top1.png" alt="">
                    <img v-else-if="item.difference <0" src="@/assets/img/bottom1.png" alt="">
                  </span>

                </div>
                <div class="i3">
                 <div class="zf " :class="item.fluctuationRange >0? '':'active'">
                  {{item.fluctuationRange>0? '+'+item.fluctuationRange:item.fluctuationRange}}%

                  </div>
                </div>
              </div>

            </div>
          </template>
          <div v-else align="center">
            <img src="@/assets/img/zanwu.png" style="width: 200px; margin-top: 136px" alt="" />
          </div>
        </van-list>

    </van-pull-refresh>

    <van-overlay :show="showCheck1" />
  </div>
</template>

<script>
import { queryTypes, customized } from '@/api/record'
import { PullRefresh, List, Overlay, Toast } from 'vant'
export default {
  name: 'SupplyDemand',
  components: {
    [PullRefresh.name]: PullRefresh,
    [Overlay.name]: Overlay,
    [Toast.name]: Toast,

    [List.name]: List
  },
  data() {
    return {
      showCheck1: false, //
      refreshing: false,
      loading: false,
      finished: false,
      params: {
        page: 1,
        perPage: 10,
        varietiesType: '', // 品种code
        varietiesName: '',
        orderBy: '', // luctuationRange  涨跌幅百分比   newPrice 最新价格
        orderDir: ''
      },
      varietiesName: '',
      list: [],
      varietiesList: [] // 品种列表
    }
  },
  created() {
    queryTypes().then(res => {
      if (res.status === 0) {
        console.log(res)
        this.varietiesList = res.data.options
      }
    })
  },
  methods: {
    // 下拉
    onRefresh() {
      this.params.page = 1
      this.list = []
      this.loadList()
    },
    loadList() {
      Toast.loading()
      customized(this.params).then(res => {
        if (res.status === 0) {
          this.list = res.data.rows
          if (this.list.length >= res.data.count) {
            this.finished = true
          } else {
            this.params.page = this.params.page + 1
          }
        }
        Toast.clear()
        this.showCheck1 = false
        this.refreshing = false
        this.loading = false
      })
    },
    handleSave() {
      this.params.page = 1
      this.varietiesName = this.params.varietiesName
      this.loadList()
    },
    // 选择品种
    handleVarieties({ label, value }) {
      this.params.varietiesType = value
      this.params.varietiesName = label
    },
    handleTab(v) {
      this.params.orderBy = v
      this.params.orderDir = 'desc'
      this.params.page = 1
      this.loadList()
    },
    // 重置
    handleReset() {
      this.params.varietiesType = ''
      this.params.page = 1
      this.params.orderBy = ''
      this.params.orderDir = ''
      this.params.varietiesName = ''
      this.varietiesName = ''
      this.loadList()
    }
  }
}
</script>
<style lang='scss' scoped>

.pl {
  position: relative;
  z-index: 8888;
  padding:0 15px;
  background-color: #fff;

}

.pa {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  .pbtns {
    display: flex;
    div {
      width: 50%;
      height: 44px;
      text-align: center;
      font-size: 15px;
      color: #999999;
      background-color: #f7f7f7;
      line-height: 44px;
    }
    div:last-child {
      background-color: #37b5b5;
      color: #ffffff;
    }
  }
  .plist {
    background-color: #fff;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    .p_item {
      width: 50%;
      padding: 0 20px;
      font-size: 14px;
      color: #999999;
      margin-bottom: 15px;
      img {
        width: 14px;
        height: 14px;
        margin-left: 20px;
      }
    }
    .p_item.on {
      color: #37b5b5;
    }
  }
}
.type_tabs {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 50px;
  border-bottom: 1px solid #eeeeee;
  .type_tab {
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 14px;
      color: #666666;
    }
    span.on {
      color: #333333;
    }
    img {
      width: 8px;
      height: 8px;
      margin-left: 6px;
    }
  }
}
.pri {
  img {
    width: 8px !important;
    height: 16px !important;
  }
}
.items{
  padding:20px 15px;
  background-color: #ffffff;
  padding-bottom: 5px;
  .item{
    display: flex;
    margin-bottom: 16px;
    div{
      width:33.333333%;
    }
    .i1{
      font-size: 13px;
      color: #333333;
      line-height: 30px;
      padding-right: 10px;
      text-align: center;
      box-sizing: border-box;
      overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    }
    .i2{
       font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        color: #FF4141;
        margin-left: 6px;
        display: flex;
        align-items: center;
        font-size: 12px;
        img{
          width: 14px;
          height: 14px;
        }
      }
      span.active{
        color:#46BB56
      }
    }
    .i3{
      padding-left: 10px;
      box-sizing: border-box;
      .zf{
        width: 70px;
        height: 30px;
        background-color:rgba(255, 97, 97, 0.15) ;
        color: #FF4141;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        margin:0 auto;
border-radius: 4px;
      }
      .zf.active{
        background-color: rgba(70, 187, 86, 0.15);
        color: #46BB56;
      }
    }
  }
}
.fz15 {
  font-size: 15px;
}
.c3 {
  color: #333333;
}
.fz13 {
  font-size: 13px;
}
.c6 {
  color: #666666;
}
.df {
  display: flex;
  align-items: center;
}
.mb10 {
  margin-bottom: 10px;
}
.jcsb {
  justify-content: space-between;
}
</style>
